﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>群聊消息</title>
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <script src="../../scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../../res/js/chat-msg.js" type="text/javascript"></script>
    <link href="../../res/css/chat-msg.css" type="text/css" rel="stylesheet"/>


</head>
<body>
<div class="mini-toolbar" style="padding:2px;border-bottom:0;">
    <table style="width:100%;">
        <tr>
            <td style="width:100%;"></td>
            <td style="white-space:nowrap;">
                <label for="user-id-auto">聊天用户: </label>
                <input id="user-id-auto" name="user-id" class="mini-autocomplete" style="width:150px;"
                       emptyText="请输入用户ID,名称"
                       ajaxType="get" valueField="id" textField="nickname" searchField="keywords"/>
                <span class="separator"></span>
            </td>
            <td style="white-space:nowrap;">
                <label for="start-date">聊天时间: </label>
                <input id="start-date" class="mini-datepicker" style="width:120px;"/> 至
                <input id="end-date" class="mini-datepicker" style="width:120px;"/>
                <span class="separator"></span>
            </td>
            <td style="white-space:nowrap;">
                <a class="mini-button" onclick="search()">查询</a>
            </td>
        </tr>
    </table>
</div>
<div class="mini-fit">
    <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
         ajaxType="get" idField="id" onload="onLoadError"
         sizeList="[5,15,25,50,100]" pageSize="15" viewType="cardview" itemRenderer="itemRenderer" showColumns="false"
         dataField="data.records" totalField="data.total">
        <div property="columns">
        </div>
    </div>
</div>

<!--  视频播放对话框  -->
<div class="video-dialog" style="display: none;">
    <div class="ui-widget-overlay ui-front video-mask"></div>
    <div class="video-play">
        <video id="video" src="" preload="auto" controls="controls" autoplay="autoplay"></video>
        <img onclick="closeVideo()" class="video-close" src="../../res/icon/x-red.png" width="25" height="25"
             alt="关闭"/>
    </div>
</div>

<script type="text/javascript">
    mini.parse();

    let header = {Authorization: $.cookie(TOKEN_KEY)};

    // 表格
    let grid = mini.get("datagrid1");
    grid.setUrl(`${MSG_API_PREFIX}/msg/group/list`);
    grid.setAjaxOptions({
        headers: header
    });
    grid.load();

    grid.on("update", function (e) {
        addGroupItemWheel();
    });

    function itemRenderer(record, rowIndex, meta, grid) {
        meta.rowCls = "item";
        let msgDom = ``;
        for (let i = 0; i < record.msgList.length; i++) {
            let chatMsg = record.msgList[i];
            chatMsg.user.msgClass = "other";
            msgDom = msgDom + generateChatMsgDom(chatMsg.user, {id: 0}, chatMsg);
        }
        let dissolveDom = ``;
        if (record.group.isDissolve === true) {
            dissolveDom = `<p class="group-id friend-uid">已解散(${mini.formatDate(record.group.dissolveTime, "yyyy-MM-dd HH:mm:ss")})</p>`;
        }
        let html = `
            <div class="groupitem frienditem">
                <div class="item-top">
                    <div class="user-left">
                        <div class="el-image group-avatar private-avatar">
                            <img src="${record.group.avatar}" class="el-image__inner">
                        </div>
                        <div class="groupinfo friendinfo">
                            <p class="group-name friend-name">${record.group.name}</p>
                            <p class="group-id friend-uid">UID:${record.group.id}</p>
                        </div>
                    </div>
                    <div class="user-left user-center">
                        <div class="groupinfo friendinfo">
                            <p class="group-name friend-name">${record.chatId}</p>
                            <p class="group-id friend-uid">${mini.formatDate(record.lastTime, "yyyy-MM-dd HH:mm:ss")}</p>
                        </div>
                    </div>
                    <div class="user-right">
                        <div class="groupinfo friendinfo">
                            <p class="group-id friend-uid">成员数量:${record.group.memberCount}</p>
                            ${dissolveDom}
                        </div>
                    </div>
                </div>
                <div  class="item-bottom">
                    <ul class="itemscroll">
                        ${msgDom}
                    </ul>
                </div>
            </div>
        `;
        return html;
    }

    // 自动补全
    let autoTextBox = mini.get("user-id-auto");
    autoTextBox.setUrl(`${MSG_API_PREFIX}/user/simlist`);
    autoTextBox.setAjaxOptions({
        headers: header
    });

    // 搜索
    function search() {
        let userId = autoTextBox.getValue();
        let startDate = mini.get("start-date").getFormValue();
        let endDate = mini.get("end-date").getFormValue();
        grid.load({userId: userId, startDate: startDate, endDate: endDate});
    }
</script>
</body>
</html>
